<script setup>
defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <!-- 有子菜单时渲染 el-submenu -->
  <el-sub-menu v-if="item.children?.length" :index="item.path">
    <template #title>
      <i :class="item.meta?.icon" class="mr-12 font-size-16" />
      <span>{{ item.meta?.title }}</span>
    </template>
    <!-- 递归调用自身渲染子菜单 -->
    <menu-tree v-for="child in item.children" :key="child.path" :item="child" />
  </el-sub-menu>
  <!-- 无子菜单时渲染 el-menu-item -->
  <el-menu-item v-else :index="item.path">
    <i :class="item.meta?.icon" class="mr-12 font-size-16" />
    <span>{{ item.meta?.title }}</span>
  </el-menu-item>
</template>

<style scoped>
.el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9);
}
.el-menu-item {
  border-radius: 8px;
}
:deep(.el-sub-menu__title) {
  border-radius: 8px;
}
/**
 右边的边框不要
 **/
.el-menu {
  border-right: none;
}
:deep(.el-menu-item:hover) {
  color: var(--el-color-primary);
}
</style>
